قانون @document در CSS: تسلط بر استایل‌دهی و انطباق مختص سند

قانون سند CSS که با @document مشخص می‌شود، یک ویژگی قدرتمند اما اغلب نادیده گرفته شده در CSS است. این قانون به شما اجازه می‌دهد تا استایل‌ها را به صورت انتخابی بر اساس ویژگی‌های سند فعلی، مانند URL، دامنه، یا حتی موتور رندر مرورگر پشتیبانی‌کننده، اعمال کنید. این قابلیت درهای جدیدی را به سوی سفارشی‌سازی پیشرفته، انطباق و بهینه‌سازی هدفمند برای صفحات وب باز می‌کند و سطحی از کنترل را فراتر از مدیا کوئری‌های استاندارد و ویژگی سلکتورها ارائه می‌دهد.

درک قانون @document

در هسته خود، قانون @document یک at-rule شرطی است. مانند @media یا @supports، این قانون یک بلوک از کد CSS را تنها زمانی اجرا می‌کند که یک شرط خاص برآورده شود. با این حال، به جای بررسی اندازه صفحه نمایش یا ویژگی‌های مرورگر، @document ویژگی‌های خود سند را بررسی می‌کند. این موضوع آن را به ویژه برای موارد زیر مفید می‌سازد:

• استایل‌دهی بر اساس URL: اعمال استایل‌های منحصر به فرد به صفحات یا بخش‌های خاصی از یک وب‌سایت.
• استایل‌دهی بین دامنه‌ای: هدف قرار دادن استایل‌ها برای منابع میزبانی شده در دامنه‌های مختلف.
• انطباق با محیط‌های مختلف: سفارشی‌سازی استایل‌ها برای چاپ، ایمیل، یا انواع خاصی از اسناد.
• ترفندهای مختص مرورگر: (اگرچه به طور کلی توصیه نمی‌شود) برای رفع ناسازگاری‌های رندر در مرورگرهای قدیمی‌تر، به عنوان آخرین راه‌حل.

سینتکس و کاربرد

سینتکس پایه قانون @document به شرح زیر است:

            @document  {
  /* CSS rules to apply */
}

            

              
                Copy
              
            
          

بخش <condition(s)> جایی است که شما معیارهایی را مشخص می‌کنید که باید برآورده شوند تا قوانین CSS درون بلوک اعمال شوند. شما می‌توانید از ترکیبی از توابع برای مطابقت با جنبه‌های مختلف سند استفاده کنید.

توابع تطبیق موجود

قانون @document از چندین تابع تطبیق پشتیبانی می‌کند که هر کدام جنبه متفاوتی از سند را هدف قرار می‌دهند. در اینجا یک تفکیک ارائه شده است:

• url(): یک URL خاص را به طور دقیق مطابقت می‌دهد.
• url-prefix(): URLهایی را که با یک پیشوند مشخص شروع می‌شوند، مطابقت می‌دهد.
• domain(): اسناد میزبانی شده در یک دامنه خاص را مطابقت می‌دهد.
• regexp(): URLها را بر اساس یک عبارت منظم (regular expression) مطابقت می‌دهد. این یک گزینه قدرتمند برای سناریوهای تطبیق پیچیده است اما برای جلوگیری از مشکلات عملکردی نیاز به استفاده دقیق دارد.

بیایید به چند مثال عملی از نحوه استفاده از این توابع نگاهی بیندازیم.

مثال‌هایی از @document در عمل

۱. استایل‌دهی به یک صفحه خاص

فرض کنید می‌خواهید یک رنگ پس‌زمینه منحصر به فرد را به صفحه «درباره ما» در وب‌سایت خود اعمال کنید. با استفاده از url()، می‌توانید آن صفحه خاص را هدف قرار دهید:

            @document url("https://www.example.com/about-us.html") {
  body {
    background-color: #f0f8ff; /* Light blue background */
  }
}

            

              
                Copy
              
            
          

این کد فقط رنگ پس‌زمینه را به صفحه‌ای که در آن URL دقیق قرار دارد اعمال می‌کند. توجه داشته باشید که تطبیق URL به حروف بزرگ و کوچک حساس است، بنابراین اطمینان حاصل کنید که URL در تابع دقیقاً با URL واقعی سند مطابقت دارد.

۲. استایل‌دهی به بخشی از یک وب‌سایت

اگر می‌خواهید کل یک بخش از وب‌سایت خود، مانند وبلاگ، را استایل‌دهی کنید، می‌توانید از url-prefix() استفاده کنید:

            @document url-prefix("https://www.example.com/blog/") {
  .blog-post {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
  }
}

            

              
                Copy
              
            
          

این کد فونت و ارتفاع خط مشخص شده را به تمام عناصری که کلاس .blog-post را دارند در هر صفحه‌ای که URL آن با "https://www.example.com/blog/" شروع می‌شود، اعمال می‌کند. این برای حفظ ظاهر و احساس یکپارچه در یک بخش خاص از وب‌سایت شما مفید است.

۳. هدف قرار دادن یک دامنه خاص

تابع domain() به شما اجازه می‌دهد تا استایل‌ها را بر اساس نام دامنه هدف قرار دهید. این زمانی مفید است که محتوا را از دامنه‌های دیگر جاسازی می‌کنید و می‌خواهید ظاهر آن را در سایت خود کنترل کنید. به عنوان مثال، برای اعمال استایل خاص به محتوای "example.org":

            @document domain("example.org") {
  img {
    border: 1px solid #ccc;
  }
}

            

              
                Copy
              
            
          

این مثال یک حاشیه به تمام تصاویری که از دامنه "example.org" سرچشمه می‌گیرند، هنگامی که در وب‌سایت شما نمایش داده می‌شوند، اضافه می‌کند. با این حال، از سیاست‌های بین مبدأ (cross-origin policies) آگاه باشید. این روش تنها در صورتی کار خواهد کرد که منبع اجازه دسترسی بین مبدأ از دامنه شما را بدهد.

۴. تطبیق پیشرفته با عبارات منظم

برای سناریوهای تطبیق پیچیده‌تر، می‌توانید از تابع regexp() استفاده کنید. این به شما امکان می‌دهد URLها را بر اساس عبارات منظم هدف قرار دهید. به عنوان مثال، برای هدف قرار دادن تمام صفحاتی که URL آنها حاوی "product" یا "item" است (بدون حساسیت به حروف بزرگ و کوچک):

            @document regexp("(?i)(product|item)") {
  .product-name {
    font-weight: bold;
  }
}

            

              
                Copy
              
            
          

در این مثال، (?i) عبارت منظم را غیر حساس به حروف بزرگ و کوچک می‌کند. عبارت منظم (product|item) یا "product" یا "item" را مطابقت می‌دهد. احتیاط: عبارات منظم می‌توانند از نظر محاسباتی سنگین باشند، به خصوص اگر به درستی نوشته نشده باشند. از آنها به ندرت استفاده کنید و اطمینان حاصل کنید که برای عملکرد بهینه شده‌اند.

ترکیب چندین شرط

شما می‌توانید چندین شرط را با استفاده از کاما در یک قانون @document ترکیب کنید. این به شما امکان می‌دهد استایل‌ها را بر اساس چندین معیار اعمال کنید. به عنوان مثال، برای اعمال استایل‌ها به هر دو صفحه «درباره ما» و «تماس با ما»:

            @document url("https://www.example.com/about-us.html"), url("https://www.example.com/contact-us.html") {
  body {
    font-family: 'Helvetica', sans-serif;
  }
}

            

              
                Copy
              
            
          

این کد فونت Helvetica را به بدنه هر دو صفحه اعمال می‌کند. مهم است توجه داشته باشید که استفاده از کاما یک شرط «OR» (یا) ایجاد می‌کند - استایل‌ها در صورتی اعمال می‌شوند که هر یک از شرایط برآورده شوند.

ویژگی (Specificity) و آبشار (Cascade)

درک ویژگی (specificity) CSS هنگام کار با قانون @document بسیار مهم است. ویژگی یک قانون CSS تعیین می‌کند که کدام قانون در هنگام اعمال چندین قانون به یک عنصر، اولویت دارد. قوانین درون یک بلوک @document ویژگی مشابهی با سایر at-ruleها دارند، اما سلکتورهای خاص درون بلوک هنوز نقش مهمی ایفا می‌کنند.

به عنوان مثال، یک قانون با یک سلکتور خاص‌تر (مانند یک سلکتور ID) همیشه یک قانون با یک سلکتور کمتر خاص (مانند یک سلکتور کلاس) را لغو می‌کند، حتی اگر هر دو قانون در یک بلوک @document باشند.

آبشار (cascade) نیز نقش دارد. اگر دو قانون ویژگی یکسانی داشته باشند، قانونی که دیرتر در شیوه‌نامه (stylesheet) ظاهر شود، اولویت خواهد داشت. این بدان معناست که اگر استایل‌های متناقضی در CSS معمولی و درون یک قانون @document تعریف کرده باشید، قانونی که دیرتر تعریف شده است اعمال خواهد شد.

سازگاری مرورگر

سازگاری مرورگر برای قانون @document در مرورگرهای مدرن نسبتاً خوب است، اما مهم است که از محدودیت‌ها در مرورگرهای قدیمی‌تر آگاه باشید. اکثر نسخه‌های مدرن Chrome، Firefox، Safari و Edge از این قانون پشتیبانی می‌کنند. با این حال، نسخه‌های قدیمی‌تر Internet Explorer از آن پشتیبانی نمی‌کنند.

برای اطمینان از اینکه استایل‌های شما در طیف وسیع‌تری از مرورگرها کار می‌کنند، استفاده از کوئری‌های ویژگی (@supports) را برای تشخیص پشتیبانی از قانون @document قبل از اعمال استایل‌ها در نظر بگیرید. به طور جایگزین، می‌توانید از یک رویکرد بهبود تدریجی (progressive enhancement) استفاده کنید، که در آن قانون @document استایل‌دهی پیشرفته‌تری را برای مرورگرهایی که از آن پشتیبانی می‌کنند فراهم می‌کند، در حالی که سایر مرورگرها به یک استایل‌دهی پایه‌ای‌تر بازمی‌گردند.

بهترین شیوه‌ها و ملاحظات

در حالی که قانون @document قابلیت‌های قدرتمندی ارائه می‌دهد، مهم است که از آن به طور معقول و با پیروی از بهترین شیوه‌ها استفاده کنید:

• اجتناب از استفاده بیش از حد: قانون @document در صورت استفاده بیش از حد می‌تواند نگهداری CSS شما را دشوارتر کند. بررسی کنید که آیا تکنیک‌های دیگر CSS، مانند سلکتورهای خاص‌تر یا مدیا کوئری‌ها، می‌توانند نتیجه مشابهی را به طور مؤثرتری به دست آورند.
• اولویت دادن به قابلیت نگهداری: هنگام استفاده از @document، کد خود را به وضوح کامنت‌گذاری کنید تا توضیح دهید چرا از این قانون استفاده می‌شود و چه شرایطی را هدف قرار می‌دهد. این کار درک و نگهداری کد را برای سایر توسعه‌دهندگان (و خود آینده‌تان) آسان‌تر می‌کند.
• عملکرد: به عملکرد توجه داشته باشید، به خصوص هنگام استفاده از عبارات منظم. اطمینان حاصل کنید که عبارات منظم شما بهینه شده‌اند و از الگوهای بیش از حد پیچیده‌ای که می‌توانند رندر را کند کنند، اجتناب کنید.
• سازگاری مرورگر: همیشه استایل‌های خود را در مرورگرهای مختلف آزمایش کنید تا مطمئن شوید که همانطور که انتظار می‌رود کار می‌کنند. از کوئری‌های ویژگی یا بهبود تدریجی برای ارائه یک بازگشت زیبا (graceful fallback) برای مرورگرهای قدیمی‌تر استفاده کنید.
• مدیریت ویژگی (Specificity): ویژگی CSS را با دقت مدیریت کنید تا از تداخل‌های غیرمنتظره بین قوانین جلوگیری شود. از محاسبه‌گرهای ویژگی و بهترین شیوه‌های CSS برای حفظ یک شیوه‌نامه قابل پیش‌بینی و قابل نگهداری استفاده کنید.
• رویکردهای جایگزین: قبل از پیاده‌سازی @document، راه‌حل‌های جایگزین مانند منطق سمت سرور برای ارائه شیوه‌نامه‌های مختلف بر اساس URL درخواستی یا استفاده از جاوا اسکریپت برای تغییر پویا استایل‌ها بر اساس ویژگی‌های سند فعلی را در نظر بگیرید.

فراتر از استایل‌دهی پایه: موارد استفاده پیشرفته

قانون @document می‌تواند برای چیزی فراتر از استایل‌دهی پایه استفاده شود. در اینجا چند مورد استفاده پیشرفته آورده شده است:

• شیوه‌نامه‌های چاپ: شما می‌توانید از @document برای اعمال استایل‌های خاص هنگام چاپ یک صفحه وب توسط کاربر استفاده کنید. در حالی که @media print برای این منظور رایج‌تر است، @document می‌تواند مفید باشد اگر نیاز به هدف قرار دادن یک قالب چاپ خاص داشته باشید.
• استایل‌دهی کلاینت ایمیل: در برخی موارد محدود، ممکن است از @document برای هدف قرار دادن کلاینت‌های ایمیل خاص هنگام رندر ایمیل‌های HTML استفاده کنید. با این حال، پشتیبانی کلاینت‌های ایمیل از CSS بسیار متغیر است، بنابراین این رویکرد باید با احتیاط و تست کامل استفاده شود. استایل‌های درون‌خطی (Inline styles) به طور کلی برای حداکثر سازگاری ترجیح داده می‌شوند.
• ادغام با سیستم مدیریت محتوا (CMS): هنگام کار با یک CMS، می‌توانید از @document برای اعمال استایل‌های خاص به انواع محتوا یا قالب‌های خاص استفاده کنید. این به شما امکان می‌دهد تا ظاهر و احساس یکپارچه‌ای را برای انواع مختلف محتوا بدون تغییر شیوه‌نامه‌های اصلی CMS حفظ کنید.
• تست A/B: اگرچه هدف اصلی آن نیست، @document می‌تواند در ترکیب با فریمورک‌های تست A/B برای اعمال استایل‌های مختلف به بخش‌های مختلف کاربران بر اساس پارامترهای URL یا سایر ویژگی‌های سند استفاده شود.

آینده CSS و استایل‌دهی سند

قانون @document ابزاری قدرتمند برای کنترل نمایش محتوای وب است و قابلیت‌های آن ممکن است در مشخصات آینده CSS گسترش یابد. با ادامه تکامل توسعه وب، درک ویژگی‌های پیشرفته CSS مانند @document برای ایجاد تجربیات وب پیچیده، انطباق‌پذیر و کاربرپسند اهمیت فزاینده‌ای پیدا خواهد کرد.

نتیجه‌گیری

قانون سند CSS (@document) روشی منحصر به فرد و ارزشمند برای هدف قرار دادن استایل‌ها بر اساس ویژگی‌های سند فراهم می‌کند. در حالی که باید با دقت و با در نظر گرفتن سازگاری مرورگر و قابلیت نگهداری استفاده شود، قابلیت‌های قدرتمندی برای سفارشی‌سازی و انطباق صفحات وب با محیط‌ها و URLهای خاص ارائه می‌دهد. با تسلط بر قانون @document، توسعه‌دهندگان وب می‌توانند کنترل بیشتری بر نمایش محتوای خود به دست آورند و تجربیات کاربری متناسب‌تر و جذاب‌تری ایجاد کنند. قدرت آن را در آغوش بگیرید و امکانات جدیدی را در سفر توسعه وب خود باز کنید!